<template lang="pug">
    header
        div.header-left
            //天气icon src='../../../public/img/icons/home/rain.png'
            img(:src='weatherURL').weather
            //温度
            span.temperature 27°
            div.location-weather
                div.location 杭州
                div.max-min-temperature
                    span 28 / 22
                    span.triangle-top
                    span.triangle-bottom
        router-link(to="/login").header-right
            img(:src="userImage")
</template>

<script>
	import rain from '../../assets/img/icons/home/rain.png'
	import login from '../../assets/img/icons/home/login.png'

	export default {
		name: "top",
		data() {
			return {
				weatherURL: rain,
				token: '',
				userImage: login
			}
		},
		mounted() {
			this.$nextTick(() => {
				this.getToken();
			});
		},
		methods: {
			// 获取token
			getToken() {
				this.token = sessionStorage.getItem('token');
				if (this.token !== null || this.token !== undefined) {
					this.getUserImage(this.token);
					console.log(this.token);
				}
			},
			// 如果有token则获取用户头像
			getUserImage(token) {
				this.$http.get('https://www.easy-mock.com/mock/5b0e9bffed71ea4dc4c171de/vue-baidu-phone/'+token).then((s) => {
					console.log(s.data.data.imageURL);
					this.changeLoginImage(s.data.data.imageURL);
				});
			},
			// 修改头像变成用户头像
			changeLoginImage(ImageURL) {
				this.userImage = ImageURL
			}
		}
	};
</script>

<style scoped lang="stylus">
    header
        height 1.0666667rem
        display: flex
        justify-content space-between
        align-items center
        margin-bottom 0.24rem
        .header-left
            padding-left 0.4rem
            .weather
                width 0.8rem
                height 0.8rem
                vertical-align text-bottom
            .temperature
                color #999
                margin-left 0.133333333rem
                font-size 0.8rem
            .location-weather
                display: inline-block
                font-size: 0.26666666667rem
                color: #999
                .max-min-temperature
                    position relative
                    .triangle-top, .triangle-bottom
                        position absolute
                        width 0
                        heigth 0
                        border 0.13333333rem solid transparent
                        border-top-color #b6b7ba
                        top 0.133333333rem
                        margin-left 0.1333333333rem
                    .triangle-bottom
                        top 0.053333333rem
                        border-top-color white
        .header-right
            display: inline-block
            img
                display: inline-block
                width 0.666666667rem
                height 0.66666666667rem
                background-size contain
                margin-right 0.4rem
                border-radius 50% 50%
</style>
